<template>
  <div id="mine">
    <van-nav-bar title="个人中心" fixed />

    <!-- 头像 -->
    <div class="mine_center">
      <div class="left">
        <van-image
          round
          width="8rem"
          height="8rem"
          fit="cover"
          src="https://img01.yzcdn.cn/vant/cat.jpeg"
        />
        <div class="phone">
          <span @click="goLogin">立即登录</span>
        </div>
      </div>
      <div class="right">
        <van-button size="mini" type="default">签到</van-button>
      </div>
    </div>

    <!-- 我的订单 -->
    <div class="dingdan">
      <div class="title">
        <span>我的订单</span>
        <p @click="toAllorderform">全部订单 ></p>
      </div>
      <van-grid>
        <van-grid-item
          class="iconfont"
          icon-prefix="icon"
          icon="daizhifu"
          text="待支付"
          to="orderform"
        />
        <van-grid-item
          class="iconfont"
          icon-prefix="icon"
          icon="huoche1"
          text="待配送"
          to="orderform"
        />
        <van-grid-item
          class="iconfont"
          icon-prefix="icon"
          icon="baoguo_shouhuo"
          text="已解决"
          to="orderform"
        />
        <van-grid-item
          class="iconfont"
          icon-prefix="icon"
          icon="tuikuan"
          text="已退款"
          to="orderform"
        />
      </van-grid>
    </div>

    <div class="gongneng">
      <van-grid>
        <van-grid-item
          class="iconfont"
          icon-prefix="icon"
          icon="bangdingshouji"
          text="绑定手机"
          @click="bdsj"
        />
        <van-grid-item
          class="iconfont"
          icon-prefix="icon"
          icon="shouhuodizhi"
          text="收货地址"
        />
        <van-grid-item
          class="iconfont"
          icon-prefix="icon"
          icon="yaoqing"
          text="邀请好友"
        />
        <van-grid-item
          class="iconfont"
          icon-prefix="icon"
          icon="quan"
          text="我的优惠"
        />
        <van-grid-item
          class="iconfont"
          icon-prefix="icon"
          icon="liwu"
          text="金豆兑换"
        />
        <van-grid-item
          class="iconfont"
          icon-prefix="icon"
          icon="douban"
          text="我的金豆"
        />
        <van-grid-item
          class="iconfont"
          icon-prefix="icon"
          icon="kehufuwukefu"
          text="联系客服"
        />
        <van-grid-item
          class="iconfont"
          icon-prefix="icon"
          icon="guanyuwomen"
          text="关于我们"
        />
      </van-grid>
    </div>

    <!-- 底部导航栏 -->
    <van-tabbar
      v-model="active"
      fixed
      active-color="#f73a3a"
      inactive-color="#000"
    >
      <van-tabbar-item name="index" to="/index" icon="home-o"
        >首页</van-tabbar-item
      >
      <van-tabbar-item name="circle" to="/circle" icon="apps-o"
        >分类</van-tabbar-item
      >
      <van-tabbar-item name="cart" to="/cart" icon="shopping-cart-o"
        >购物车</van-tabbar-item
      >
      <van-tabbar-item name="mine" to="/mine" icon="contact"
        >我的</van-tabbar-item
      >
    </van-tabbar>
  </div>
</template>

<script>
import { Dialog } from "vant";
export default {
  data() {
    return {
      active: "mine",
    };
  },
  methods: {
    goLogin() {
      this.$router.push("login");
    },
    toAllorderform() {
      this.$router.push("orderform");
    },
    bdsj() {
      Dialog.confirm({
        title: "绑定手机号",
        message: "请先登录",
      }).then(() => {
        this.$router.push("login");
      });
    },
  },
};
</script>

<style lang="scss">
#mine {
  .icon {
    font-style: inherit;
  }
  background-color: #f8f8f8;
  .van-hairline--bottom::after {
    border: 0;
  }
  .van-nav-bar {
    background-color: #f73a3a;
    .van-nav-bar__title {
      color: #fff;
    }
  }
  .mine_center {
    padding: 46px 10px 60px 10px;
    background-color: #f73a3a;
    display: flex;
    justify-content: space-between;
    .left {
      display: flex;
      .van-image {
        padding: 10px;
      }
      .phone {
        color: #fff;
        span {
          line-height: 8rem;
          align-items: end;
          font-size: 18px;
          display: block;
          margin-top: 10px;
        }
      }
    }
    .right {
      display: flex;
      align-items: center;
      .van-button {
        padding: 15px 20px;
        border-radius: 5px;
        border: 0;
        color: #f73a3a;
      }
    }
  }
  .van-hairline--top::after,
  .van-grid-item__content::after {
    border: 0;
  }
  .dingdan {
    margin: -40px 10px 10px 10px;
    border-radius: 5px;
    background-color: #fff;
    .title {
      padding: 10px;
      display: flex;
      justify-content: space-between;
      span {
        font-size: 18px;
      }
      p {
        font-size: 14px;
        color: gray;
      }
    }
  }
  .gongneng {
    margin: 10px;
    border-radius: 5px;
    background-color: #fff;
  }
}
</style>